<template>
	<view class="left-menu-list">
		<view :class="leftMenuId == item.id ?'left-menu-li active':'left-menu-li'" @click="changeleft(item)"
			v-for="(item,index) in list" :key="index">
			<view class="left-menu-fname">
				<view class="left-menu-text">
					{{item.name}}
				</view>
				<uni-icons class="icon-down" :size="15" type="down"
					v-if="item.children && item.children.length>0"></uni-icons>
			</view>
			<view class="left-second">
				<view class="left-second-li" v-for="(sitem,sindex) in item.children" :key="sindex"
					@click.stop="pcChooseFl(sitem)">
					{{sitem.name}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				leftMenuId: '', //左侧分类id 
				goodFlText: this.$t('index.qbfl'), //当前分类
				goodFlYx: {}, //预选分类
			}
		},
		props: {
			list: {
				typeof: Array,
				default () {
					return []
				}
			}
		},
		methods: {
			// 左侧分类
			changeleft(item) {
				if (this.leftMenuId == item.id) {
					this.leftMenuId = ''
				} else {
					this.leftMenuId = item.id
					this.goodFlYx = item
				}
				if (!this.fl_show) {
					this.goodFlText = item.fname
					this.goodFlYx = item
				}
				this.$emit('changeleft', [this.leftMenuId, this.goodFlText, this.goodFlYx])
			},
			//pc选择分类
			pcChooseFl(item) {
				this.$emit('pcChooseFl', item)
				this.goodFlText = item.sname
			},
		}
	}
</script>

<style lang="scss">
	.pc-left-menu {
		margin-top: 10px;
		padding: 0 5px;
		max-width: 265px;
		padding-right: 25px;
		box-sizing: border-box;

		.left-menu-title {
			font-weight: bold;
		}
	}

	.left-menu-list {
		padding: 8px 0 0 0;
		width: 100%;
		border-bottom: 1px solid #ddd;

		.left-menu-li {
			.left-menu-text {
				padding-left: 5px;
			}

			.left-second {
				height: 0;
				opacity: 0;
				overflow: hidden;

				.left-second-li {
					background: #f8f8f8;
					height: 30px;
					font-size: 14px;
					line-height: 30px;
					font-weight: normal;
					padding: 5px 0;
					padding-left: 12px;
					color: rgb(51, 51, 51);
					overflow: hidden;
					word-break: break-all;
					white-space: nowrap;
					text-overflow: ellipsis;
					cursor: pointer;

					&:hover {
						background: #f0f0f0;
					}
				}


			}

			&.active {
				background: #f0f0f0;

				.left-second {
					height: 100%;
					opacity: 1;
				}

				.icon-down {
					transform: rotate(-180deg);
				}
			}

			.left-menu-fname {
				display: flex;
				justify-content: space-between;
				-webkit-box-align: center;
				align-items: center;
				flex-shrink: 0;
				padding: 5px 8px 5px 0;
				min-height: 20px;
				line-height: 20px;
				font-size: 14px;
				color: rgb(51, 51, 51);
				text-decoration: none;
				cursor: pointer;

				&:hover {
					background: #efefef;

					.left-menu-text {
						border-bottom: 1px solid #333;
					}
				}
			}
		}

		.icon-down {
			font-weight: bold;
			transition: .3s;
		}

		&.active {
			.left-second {
				height: 100%;
				opacity: 1;
			}

			.icon-down {
				transform: rotate(-180deg);
			}
		}
	}
</style>